<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="custom-nav-bar" :style="{ paddingTop: safeAreaInsets.top + 'px' }">
			<view class="nav-left" @click="navigateBack">
				<uni-icons type="back" size="28" color="#333"></uni-icons>
			</view>
			<text class="nav-title">设置中心</text>
		</view>

		<scroll-view class="main-content" scroll-y>
			<!-- 通知设置 -->
			<view class="setting-card">
				<view class="section-title">消息通知设置</view>
				<view class="switch-list">
					<view class="switch-item">
						<view class="item-left">
							<uni-icons type="notification" size="24" color="#09BE4F" />
							<text>优惠信息通知</text>
						</view>
						<switch :checked="notifyConfig.discount" @change="toggleNotify('discount')" color="#09BE4F" />
					</view>
					<view class="switch-item">
						<view class="item-left">
							<uni-icons type="calendar" size="24" color="#FF9800" />
							<text>预售信息通知</text>
						</view>
						<switch :checked="notifyConfig.presale" @change="toggleNotify('presale')" />
					</view>
					<view class="switch-item">
						<view class="item-left">
							<uni-icons type="car" size="24" color="#2196F3" />
							<text>发货信息通知</text>
						</view>
						<switch :checked="notifyConfig.deliver" @change="toggleNotify('deliver')" />
					</view>
					<view class="switch-item">
						<view class="item-left">
							<uni-icons type="checkbox-mark" size="24" color="#4CAF50" />
							<text>到货信息通知</text>
						</view>
						<switch :checked="notifyConfig.arrival" @change="toggleNotify('arrival')" />
					</view>
				</view>
			</view>

			<!-- 推送管理 -->
			<view class="setting-card">
				<view class="section-title">推送管理</view>
				<view class="menu-list">
					<view class="menu-item" @click="navigateTo('schedule')">
						<view class="item-left">
							<uni-icons type="time" size="24" color="#673AB7" />
							<text>推送时段设置</text>
						</view>
						<text class="time-range">22:00-8:00勿扰</text>
					</view>
					<view class="menu-item">
						<view class="item-left">
							<uni-icons type="sound" size="24" color="#F44336" />
							<text>通知提示音</text>
						</view>
						<text class="sound-name">默认铃声</text>
					</view>
				</view>
			</view>

			<!-- 系统设置 -->
			<view class="setting-card">
				<view class="section-title">系统设置</view>
				<view class="menu-list">
					<view class="menu-item">
						<view class="item-left">
							<uni-icons type="trash" size="24" color="#9E9E9E" />
							<text>清除缓存</text>
						</view>
						<text class="cache-size">256MB</text>
					</view>
					<view class="menu-item" @click="checkUpdate">
						<view class="item-left">
							<uni-icons type="loop" size="24" color="#2196F3" />
							<text>检查更新</text>
						</view>
						<text class="version">v2.3.1</text>
					</view>
					<view class="menu-item" @click="navigateTo('about')">
						<view class="item-left">
							<uni-icons type="info" size="24" color="#FF9800" />
							<text>关于我们</text>
						</view>
						<uni-icons type="forward" size="20" color="#999" />
					</view>
				</view>
			</view>

			<!-- 权限管理 -->
			<view class="setting-card">
				<view class="section-title">权限管理</view>
				<view class="switch-list">
					<view class="switch-item">
						<view class="item-left">
							<uni-icons type="location" size="24" color="#009688" />
							<text>位置权限</text>
						</view>
						<switch :checked="permissionConfig.location" @change="togglePermission('location')" />
					</view>
					<view class="switch-item">
						<view class="item-left">
							<uni-icons type="notification" size="24" color="#E91E63" />
							<text>通知权限</text>
						</view>
						<switch :checked="permissionConfig.notification" @change="togglePermission('notification')" />
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				notifyConfig: {
					discount: true,
					presale: true,
					deliver: true,
					arrival: true
				},
				permissionConfig: {
					location: true,
					notification: true
				},
				safeAreaInsets: {
					top: 0,
					bottom: 0
				}
			};
		},
		onLoad() {
			this.getSafeAreaInsets();
		},
		methods: {
			navigateBack() {
				uni.navigateBack();
			},
			toggleNotify(type) {
				this.notifyConfig[type] = !this.notifyConfig[type];
				uni.showToast({
					title: '设置已更新',
					icon: 'none'
				});
			},
			togglePermission(type) {
				this.permissionConfig[type] = !this.permissionConfig[type];
			},
			checkUpdate() {
				uni.showModal({
					title: '当前已是最新版本',
					content: 'v2.3.1',
					showCancel: false
				});
			},
			navigateTo(page) {
				const map = {
					schedule: '/pages/settings/schedule',
					about: '/pages/settings/about'
				};
				uni.navigateTo({
					url: map[page]
				});
			},
			getSafeAreaInsets() {
				uni.getSystemInfo({
					success: (res) => {
						this.safeAreaInsets = {
							top: res.safeArea ? res.safeArea.top : res.statusBarHeight,
							bottom: res.safeArea ? res.safeArea.bottom : 0
						};
					},
					fail: (err) => {
						console.error('获取系统信息失败:', err);
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		background: #f5f5f5;
		min-height: 100vh;
	}

	/* 自定义导航栏 */
	.custom-nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
		background-color: white;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: sticky;
		top: 0;
		z-index: 10;
		height: 90rpx;

		.nav-left {
			display: flex;
			align-items: center;
		}

		.nav-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			flex: 1;
			text-align: center;
		}
	}

	.setting-card {
		margin: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);

		.section-title {
			padding: 30rpx;
			font-size: 32rpx;
			font-weight: 500;
			border-bottom: 1rpx solid #eee;
		}

		.switch-list {
			padding: 0 30rpx;

			.switch-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}

				.item-left {
					display: flex;
					align-items: center;

					uni-icons {
						margin-right: 20rpx;
					}

					text {
						font-size: 30rpx;
					}
				}
			}
		}

		.menu-list {
			.menu-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1rpx solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}

				.item-left {
					display: flex;
					align-items: center;

					uni-icons {
						margin-right: 20rpx;
					}

					text {
						font-size: 30rpx;
					}
				}

				.time-range,
				.sound-name,
				.cache-size,
				.version {
					color: #999;
					font-size: 28rpx;
				}
			}
		}
	}
</style>